<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="icon" type="images/x-icon" href="../images/favicon.ico" />
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/Puplic.css">
    <link rel="stylesheet" href="../css/Index.css">
    <link rel="stylesheet" href="../css/Goods_list.css">
    <link rel="stylesheet" href="../css/Details.css">
</head>
<body>
<!-- 主体导航 -->
<div class="site-header">
    <div class="site-container">
        <div class="header-nav fl">
            <ul class="nav-list router-link">
                
            </ul>
        </div>
    </div>
</div>
<div class="router-view"></div>
</body>
<script src="../template/home.js"></script>
<script src="../template/goods.js"></script>
<script src="../template/detail.js"></script>
<script>

    // console.log(home)
    // console.log(detail)
    // console.log(goods)

    const router = [{
        path:"/home",
        component: home,
        text:"首页"
    },{
        path:"/goods",
        component: goods,
        text:"全部商品分类"
    },{
        path:"/detail",
        component: detail,
        text:"xxx手机"
    }];

    createRouterLink( router );

    function createRouterLink(data){
        let str = "";
        data.forEach(val=>{
            str += `<li class="nav-item"><a href="#${val.path}">${val.text}</a></li>`
        })
        $(".router-link").innerHTML = str;
    }


    const render = {
        home(){
            return home;
        },
        goods(){
            return goods;
        },
        detail(){
            return detail;
        }
    }


    const hash = location.hash.slice(2).split("/")[0] || "home";
    $(".router-view").innerHTML = render[hash]();

    onhashchange = function(){
        const hash = location.hash.slice(2).split("/")[0];
        $(".router-view").innerHTML = render[hash]();
    }

    function $(s){
        return document.querySelector(s)
    }
</script>
</html>